{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}波道{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       波道管理
      </h1>
      <ol class="breadcrumb">
        <li><a href={% url 'dashboard' %}><i class="fa fa-dashboard"></i>主页</a></li>
        <li class="active">波道管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <form action={% url 'channel' %}  method="get">
            <div class="form-group">
              <div class="row">
                <div class="col-xs-2">
                  <label for="search">波道名称</label>
                  <textarea id='name' rows='1' class="form-control" name='name'></textarea>
                </div>
                <div class="col-xs-4">
                  <label for="search">DWDM</label>
                  <input type="text" class="form-control" name='dwdm'>
                </div>
                <div class="col-xs-2">
                  <label for="search">状态</label>
                  <select class="form-control" name='status' id='status'>
                    <option selected value></option>
                    <option value='0'>运营</option>
                    <option value='1'>拆除</option>
                    <option value='2'>待启用</option>
                  </select>
                </div>
                <div class="col-xs-2">
                  <label for="search">客户</label>
                  <input type="text" class="form-control" name='customer'>
                </div>                
              </div>
            </div>
            <div class="form-group">
              <div class="row">  
                <div class="col-xs-3">
                  <label for="search">起始端设备</label>
                  <input type="text" class="form-control" name='networkdevice_a'>
                </div>
                <div class="col-xs-2">
                  <label for="search">起始端设备端口</label>
                  <input type="text" class="form-control" name='port_a'>
                </div>
                <div class="col-xs-3">
                  <label for="search">终止端设备</label>
                  <input type="text" class="form-control" name='networkdevice_z'>
                </div>
                <div class="col-xs-2">
                  <label for="search">终止端设备端口</label>
                  <input type="text" class="form-control" name='port_z'>
                </div>
              </div>
            </div>
            <p style=" margin:0 auto; text-align:center;">
              <button type="submit" id="searchbutton" align="center" class="btn">查询</button>
            </p>
           </form>
    <div class="row">
    <div class="col-xs-12">
      <div>
          <label class="checkbox-inline">
          波道名称<input type="checkbox" class="toggle-vis" data-column="0" checked="checked"/>
          </label>
          <label class="checkbox-inline">
          DWDM<input type="checkbox" class="toggle-vis" data-column="1" checked="checked"/>
          </label>
          <label class="checkbox-inline">
          状态<input type="checkbox" class="toggle-vis" data-column="2" checked="checked"/>
          </label>
           <label class="checkbox-inline">
           客户<input type="checkbox" class="toggle-vis" data-column="3" checked="checked"/>
           </label>
           <label class="checkbox-inline">
           起始端设备<input type="checkbox" class="toggle-vis" data-column="4" checked="checked"/>
           </label>
           <label class="checkbox-inline">
           起始端设备端口<input type="checkbox" class="toggle-vis" data-column="5" checked="checked"/>
           </label>
           <label class="checkbox-inline">
           终止端设备<input type="checkbox" class="toggle-vis" data-column="6" checked="checked"/>
           </label>
           <label class="checkbox-inline">
           终止端设备端口<input type="checkbox" class="toggle-vis" data-column="7" checked="checked"/>
           </label>
           <label class="checkbox-inline">
           备注<input type="checkbox" class="toggle-vis" data-column="8"/>
           </label>
      </div>
      <div class="box">
        <div class="box-header">
          <h4 class="box-title">查询结果</h4>
          <a href= {% url 'assetimport' '波道' %}><button type="submit" class="btn btn-default pull-right">波道导入</button></a>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="channel_table" class="display table table-bordered table-striped">
            <thead>
            <tr>
              <th>波道名称</th>
              <th>DWDM</th>
              <th>状态</th>
              <th>客户</th>
              <th>起始端设备</th>
              <th>起始端设备端口</th>
              <th>终止端设备</th>
              <th>终止端设备端口</th>
              <th>备注</th>
            </tr>
            </thead>
            <tbody>
                {% for channel in channel %}
                <tr>
                  <td><a href="{% url 'channeldetail' channel.id %}" target=_blank >{{ channel.name }}</td>
                  <td>{{ channel.dwdm|default:'' }}</td> 
                  <td>{{ channel.get_status_display }}</td>
                  <td>{{ channel.customer|default:'' }}</td>
                  <td>{{ channel.networkdevice_a.hostname|default:'' }}</td>                
                  <td>{{ channel.port_a|default:'' }}</td>
                  <td>{{ channel.networkdevice_z.hostname|default:'' }}</td>
                  <td>{{ channel.port_z|default:'' }}</td>
                  <td>{{ channel.memo|default:'' }}</td>
                </tr>
                {% empty %}
                  <tr>没有数据！</tr>
                {% endfor %}

            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}
{% block page-script %}
<script src="{% static 'js/mygeturl.js' %}"></script>
{% endblock %}
